<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-state-Stateful'>/**
</span> * @class Ext.state.Stateful
 * A mixin for being able to save the state of an object to an underlying
 * {@link Ext.state.Provider}.
 */
Ext.define('Ext.state.Stateful', {

    /* Begin Definitions */

   mixins: {
        observable: 'Ext.util.Observable'
    },

    requires: ['Ext.state.Manager'],

    /* End Definitions */

<span id='Ext-state-Stateful-cfg-stateful'>    /**
</span>     * @cfg {Boolean} stateful
     * &lt;p&gt;A flag which causes the object to attempt to restore the state of
     * internal properties from a saved state on startup. The object must have
     * a &lt;code&gt;{@link #stateId}&lt;/code&gt; for state to be managed.
     * Auto-generated ids are not guaranteed to be stable across page loads and
     * cannot be relied upon to save and restore the same state for a object.&lt;p&gt;
     * &lt;p&gt;For state saving to work, the state manager's provider must have been
     * set to an implementation of {@link Ext.state.Provider} which overrides the
     * {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get}
     * methods to save and recall name/value pairs. A built-in implementation,
     * {@link Ext.state.CookieProvider} is available.&lt;/p&gt;
     * &lt;p&gt;To set the state provider for the current page:&lt;/p&gt;
     * &lt;pre&gt;&lt;code&gt;
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));
     * &lt;/code&gt;&lt;/pre&gt;
     * &lt;p&gt;A stateful object attempts to save state when one of the events
     * listed in the &lt;code&gt;{@link #stateEvents}&lt;/code&gt; configuration fires.&lt;/p&gt;
     * &lt;p&gt;To save state, a stateful object first serializes its state by
     * calling &lt;b&gt;&lt;code&gt;{@link #getState}&lt;/code&gt;&lt;/b&gt;. By default, this function does
     * nothing. The developer must provide an implementation which returns an
     * object hash which represents the restorable state of the object.&lt;/p&gt;
     * &lt;p&gt;The value yielded by getState is passed to {@link Ext.state.Manager#set}
     * which uses the configured {@link Ext.state.Provider} to save the object
     * keyed by the &lt;code&gt;{@link #stateId}&lt;/code&gt;&lt;/p&gt;.
     * &lt;p&gt;During construction, a stateful object attempts to &lt;i&gt;restore&lt;/i&gt;
     * its state by calling {@link Ext.state.Manager#get} passing the
     * &lt;code&gt;{@link #stateId}&lt;/code&gt;&lt;/p&gt;
     * &lt;p&gt;The resulting object is passed to &lt;b&gt;&lt;code&gt;{@link #applyState}&lt;/code&gt;&lt;/b&gt;.
     * The default implementation of &lt;code&gt;{@link #applyState}&lt;/code&gt; simply copies
     * properties into the object, but a developer may override this to support
     * more behaviour.&lt;/p&gt;
     * &lt;p&gt;You can perform extra processing on state save and restore by attaching
     * handlers to the {@link #beforestaterestore}, {@link #staterestore},
     * {@link #beforestatesave} and {@link #statesave} events.&lt;/p&gt;
     */
    stateful: true,

<span id='Ext-state-Stateful-cfg-stateId'>    /**
</span>     * @cfg {String} stateId
     * The unique id for this object to use for state management purposes.
     * &lt;p&gt;See {@link #stateful} for an explanation of saving and restoring state.&lt;/p&gt;
     */

<span id='Ext-state-Stateful-cfg-stateEvents'>    /**
</span>     * @cfg {Array} stateEvents
     * &lt;p&gt;An array of events that, when fired, should trigger this object to
     * save its state (defaults to none). &lt;code&gt;stateEvents&lt;/code&gt; may be any type
     * of event supported by this object, including browser or custom events
     * (e.g., &lt;tt&gt;['click', 'customerchange']&lt;/tt&gt;).&lt;/p&gt;
     * &lt;p&gt;See &lt;code&gt;{@link #stateful}&lt;/code&gt; for an explanation of saving and
     * restoring object state.&lt;/p&gt;
     */

<span id='Ext-state-Stateful-cfg-saveBuffer'>    /**
</span>     * @cfg {Number} saveBuffer A buffer to be applied if many state events are fired within
     * a short period. Defaults to 100.
     */
    saveDelay: 100,

    autoGenIdRe: /^((\w+-)|(ext-comp-))\d{4,}$/i,

    constructor: function(config) {
        var me = this;

        config = config || {};
        if (Ext.isDefined(config.stateful)) {
            me.stateful = config.stateful;
        }
        if (Ext.isDefined(config.saveDelay)) {
            me.saveDelay = config.saveDelay;
        }
        me.stateId = me.stateId || config.stateId;

        if (!me.stateEvents) {
            me.stateEvents = [];
        }
        if (config.stateEvents) {
            me.stateEvents.concat(config.stateEvents);
        }
        this.addEvents(
<span id='Ext-state-Stateful-event-beforestaterestore'>            /**
</span>             * @event beforestaterestore
             * Fires before the state of the object is restored. Return false from an event handler to stop the restore.
             * @param {Ext.state.Stateful} this
             * @param {Object} state The hash of state values returned from the StateProvider. If this
             * event is not vetoed, then the state object is passed to &lt;b&gt;&lt;tt&gt;applyState&lt;/tt&gt;&lt;/b&gt;. By default,
             * that simply copies property values into this object. The method maybe overriden to
             * provide custom state restoration.
             */
            'beforestaterestore',

<span id='Ext-state-Stateful-event-staterestore'>            /**
</span>             * @event staterestore
             * Fires after the state of the object is restored.
             * @param {Ext.state.Stateful} this
             * @param {Object} state The hash of state values returned from the StateProvider. This is passed
             * to &lt;b&gt;&lt;tt&gt;applyState&lt;/tt&gt;&lt;/b&gt;. By default, that simply copies property values into this
             * object. The method maybe overriden to provide custom state restoration.
             */
            'staterestore',

<span id='Ext-state-Stateful-event-beforestatesave'>            /**
</span>             * @event beforestatesave
             * Fires before the state of the object is saved to the configured state provider. Return false to stop the save.
             * @param {Ext.state.Stateful} this
             * @param {Object} state The hash of state values. This is determined by calling
             * &lt;b&gt;&lt;tt&gt;getState()&lt;/tt&gt;&lt;/b&gt; on the object. This method must be provided by the
             * developer to return whetever representation of state is required, by default, Ext.state.Stateful
             * has a null implementation.
             */
            'beforestatesave',

<span id='Ext-state-Stateful-event-statesave'>            /**
</span>             * @event statesave
             * Fires after the state of the object is saved to the configured state provider.
             * @param {Ext.state.Stateful} this
             * @param {Object} state The hash of state values. This is determined by calling
             * &lt;b&gt;&lt;tt&gt;getState()&lt;/tt&gt;&lt;/b&gt; on the object. This method must be provided by the
             * developer to return whetever representation of state is required, by default, Ext.state.Stateful
             * has a null implementation.
             */
            'statesave'
        );
        me.mixins.observable.constructor.call(me);
        if (me.stateful !== false) {
            me.initStateEvents();
            me.initState();
        }
    },

<span id='Ext-state-Stateful-method-initStateEvents'>    /**
</span>     * Initializes any state events for this object.
     * @private
     */
    initStateEvents: function() {
        this.addStateEvents(this.stateEvents);
    },

<span id='Ext-state-Stateful-method-addStateEvents'>    /**
</span>     * Add events that will trigger the state to be saved.
     * @param {String/Array} events The event name or an array of event names.
     */
    addStateEvents: function(events){
        if (!Ext.isArray(events)) {
            events = [events];
        }

        var me = this,
            i = 0,
            len = events.length;

        for (; i &lt; len; ++i) {
            me.on(events[i], me.onStateChange, me);
        }
    },

<span id='Ext-state-Stateful-method-onStateChange'>    /**
</span>     * This method is called when any of the {@link #stateEvents} are fired.
     * @private
     */
    onStateChange: function(){
        var me = this,
            delay = me.saveDelay;

        if (delay &gt; 0) {
            if (!me.stateTask) {
                me.stateTask = Ext.create('Ext.util.DelayedTask', me.saveState, me);
            }
            me.stateTask.delay(me.saveDelay);
        } else {
            me.saveState();
        }
    },

<span id='Ext-state-Stateful-method-saveState'>    /**
</span>     * Saves the state of the object to the persistence store.
     * @private
     */
    saveState: function() {
        var me = this,
            id,
            state;

        if (me.stateful !== false) {
            id = me.getStateId();
            if (id) {
                state = me.getState();
                if (me.fireEvent('beforestatesave', me, state) !== false) {
                    Ext.state.Manager.set(id, state);
                    me.fireEvent('statesave', me, state);
                }
            }
        }
    },

<span id='Ext-state-Stateful-method-getState'>    /**
</span>     * Gets the current state of the object. By default this function returns null,
     * it should be overridden in subclasses to implement methods for getting the state.
     * @return {Object} The current state
     */
    getState: function(){
        return null;
    },

<span id='Ext-state-Stateful-method-applyState'>    /**
</span>     * Applies the state to the object. This should be overridden in subclasses to do
     * more complex state operations. By default it applies the state properties onto
     * the current object.
     * @param {Object} state The state
     */
    applyState: function(state) {
        if (state) {
            Ext.apply(this, state);
        }
    },

<span id='Ext-state-Stateful-method-getStateId'>    /**
</span>     * Gets the state id for this object.
     * @return {String} The state id, null if not found.
     */
    getStateId: function() {
        var me = this,
            id = me.stateId;

        if (!id) {
            id = me.autoGenIdRe.test(String(me.id)) ? null : me.id;
        }
        return id;
    },

<span id='Ext-state-Stateful-method-initState'>    /**
</span>     * Initializes the state of the object upon construction.
     * @private
     */
    initState: function(){
        var me = this,
            id = me.getStateId(),
            state;

        if (me.stateful !== false) {
            if (id) {
                state = Ext.state.Manager.get(id);
                if (state) {
                    state = Ext.apply({}, state);
                    if (me.fireEvent('beforestaterestore', me, state) !== false) {
                        me.applyState(state);
                        me.fireEvent('staterestore', me, state);
                    }
                }
            }
        }
    },

<span id='Ext-state-Stateful-method-destroy'>    /**
</span>     * Destroys this stateful object.
     */
    destroy: function(){
        var task = this.stateTask;
        if (task) {
            task.cancel();
        }
        this.clearListeners();

    }

});
</pre>
</body>
</html>
